---
import SingleVerticalListOfPokemonsVue from "@/components/examples/vue/SingleVerticalListOfPokemonsWithInsert.vue";
import SingleVerticalListOfPokemonsSvelte from "@/components/examples/svelte/SingleVerticalListOfPokemonsWithInsert.svelte";
import { SingleVerticalListOfPokemonsWithInsert as SingleVerticalListOfPokemonsWithInsertReact } from "@/components/examples/react/SingleVerticalListOfPokemonsWithInsert.tsx";
import {getI18N} from '@/i18n/index.ts';  
import PageComponent from "./shared/page-component.astro";

const { currentLocale } = Astro;
const { framework } = Astro.props;
const i18n = getI18N({ currentLocale });

const verticalList=`
<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";
import type { Pokemon } from "./Pokemon";
import PokemonComponent from "./PokemonComponent.vue";
import { fetchPokemons } from "@/server/pokemonServer";

const pokemons = ref([] as Pokemon[]);
pokemons.value = await fetchPokemons(9);
const [ parent ] = useDragAndDrop(pokemons,{
  draggingClass: "dragging-pokemon"
});
</script>
<template>
  <div class="flex max-sm:justify-center items-start">
    <div
      ref="parent"
      class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
    >
      <PokemonComponent
        v-for="(pokemon, index) in pokemons"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
      />
    </div>
  </div>
</template>
`
const verticalListSvelteCode = `
<script lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";
import type { Pokemon } from "../Pokemon";
import PokemonComponent from "@/components/examples/svelte/PokemonComponent.svelte";
import { fetchPokemons } from "@/server/pokemonServer";

const pokemons = $state([] as Pokemon[]);
fetchPokemons(3).then((newPokemons)=>{
  pokemons.push(...newPokemons);
});
const [ parent, insertAt ] = useDragAndDrop(pokemons, {
  removingClass: "removed",
  delayBeforeRemove: 300,
});
let pokemonsToSelected = $state([] as Pokemon[]);
$effect(()=>{
  (async () => {
    pokemonsToSelected = await fetchPokemons(10,0, pokemons)
  })()
})
let pokemonToAdd = $state<Pokemon|undefined>(undefined)
function insertPokemon(){
  const lastPosition = pokemons.length
  if (pokemonToAdd) {
    insertAt(lastPosition, pokemonToAdd)
    pokemonToAdd = undefined
  }
}
</script>
<div class="flex max-sm:justify-center items-start">
  <div class="flex flex-col gap-4">
    <div
      use:parent
      class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
    >
      {#each pokemons as pokemon, index (pokemon.name)}
        <PokemonComponent
          index={index}
          pokemon={pokemon}
          class="min-h-[200px]"
        />
      {/each}
    </div>
   <div class="flex gap-4 max-sm:flex-col">
    <select bind:value={pokemonToAdd} class="rounded-lg bg-gray-700 p-2 w-60">
      <option disabled value={null}>Please select one</option>
      {#each pokemonsToSelected as pokemon (pokemon.name)}
        <option value={pokemon}>{pokemon.name}</option>
      {/each}
    </select>
    <button class="rounded-lg border-2 hover:bg-gray-700 transition-colors" onclick={insertPokemon}>Add pokemon</button>
   </div>
  </div>
</div>
`
const reactCode = `
  import { useDragAndDrop } from "fluid-dnd/react";
import type { Pokemon } from "../Pokemon";
import { fetchPokemons } from "@/server/pokemonServer";
import { PokemonComponent } from "./PokemonComponent";
import { useEffect, useState } from "react";

export const SingleVerticalListOfPokemonsWithInsert: React.FC = () => {
  const [ parent, listOfPokemons, setPokemons, insertAt ] = useDragAndDrop<Pokemon, HTMLDivElement>([], {
    draggingClass: "dragging-pokemon",
  });
  const [pokemonToAdd, setPokemonToAdd] = useState<Pokemon>();
  const [pokemonsToSelected, setPokemonsToSelected] = useState<Pokemon[]>([]);
  function insertPokemon(){
    const lastPosition = listOfPokemons.length
    if (pokemonToAdd) {
      insertAt(lastPosition, pokemonToAdd)
      setPokemonToAdd(undefined)
    }
  }
  useEffect(() => { 
      const fetchPokemonse = async () => {
          const newPokemons = await fetchPokemons(3);
          setPokemons(newPokemons);
      }
      fetchPokemonse();
  }, [])
  useEffect(()=>{
    const fetchPokemonsToSelect = async () => {
      var pokemons = await fetchPokemons(10,0, listOfPokemons)
      setPokemonsToSelected(pokemons);
    }
    fetchPokemonsToSelect();
  },[])
  return (
    <div className="flex max-sm:justify-center items-start">
      <div
        ref={parent}
        className="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
      >
        {
          listOfPokemons.map((pokemon, index) => (
            <PokemonComponent
              key={pokemon.name}
              index={index}
              pokemon={pokemon}
            />
          ))
        }
      </div>
      <div className="flex gap-4 max-sm:flex-col">
        <select  className="rounded-lg bg-gray-700 p-2 w-60">
          <option disabled>Please select one</option>
          {
            pokemonsToSelected.map((pokemon) => (
              <option key={pokemon.name}>{pokemon.name}</option>
            ))
          }
        </select>
        <button className="rounded-lg border-2 hover:bg-gray-700 transition-colors" onClick={insertPokemon}>Add pokemon</button>
      </div>
    </div>
  )
}

`
const fileName = 'SingleVerticalListOfPokemons';
---
<PageComponent title={i18n.SINGLE_VERTICAL_LIST_WITH_INSERT} framework={framework} vueCode={verticalList} svelteCode={verticalListSvelteCode} reactCode={reactCode} fileName={fileName}>
  <fragment slot="vue">
    <SingleVerticalListOfPokemonsVue client:load />
  </fragment>
  <fragment slot="svelte">
    <SingleVerticalListOfPokemonsSvelte client:load />
  </fragment>
  <fragment slot="react">
    <SingleVerticalListOfPokemonsWithInsertReact client:load />
  </fragment>
</PageComponent>
<style>
 select {
    background-color: auto !important;
  }

</style>